import React, {useState, useEffect, useRef} from 'react';
import FilterTool from '../../../components/FilterTool';
import services from '../../../services/api';
import { message } from 'antd';
import moment from 'moment';
import { product } from 'ramda';
export default function searchMent(props) {
  const filterNode = useRef(null);
  useEffect(() => {
    getAppCodeList();
    // getEventCodeList();
    // getProductCodeList();
  },[])
  const [applications, setAppLications] = useState([]); // 渠道数据
  const [appIds, setAppIds] = useState(''); //渠道id
  const [productIds, setProduction] = useState(''); //产品id
  const [events, setEvents] = useState([]); // 事件数据
  const [productList, setProductList] = useState([]); // 产品数据
  // 渠道
  const getAppCodeList = () => {
    services.application.getAppCodeList().then((res) => {
      if (res.code === 0) {
        res.data.unshift({app_id: -1, app_name: '所有渠道'})
        setAppLications(res.data)
      } else {
        message.error(res.msg);
      }
    });
  };
  const getProductCodeList = ({ app_id = -1 } = {}) => {
    services.product.getProductCodeList({ app_id }).then((res) => {
      if (res.code === 0) {
        res.data.unshift({product_id: -1, product_name: '所有产品'})
        setProductList(res.data);
        filterNode.current.handleChange('product_id', -1);
      }
    });
  };
  // 事件
  const getEventCodeList = ({app_id = -1, product_id = -1}) => {
    services.event.getEventCodeList({ app_id, product_id}).then((res) => {
      if (res.code === 0) {
        res.data.unshift({event_id: -1, event_name: '所有事件'})
        setEvents(res.data) 
        filterNode.current.handleChange('event_id', -1);
      } else {
        message.error(res.msg);
      }
    });
  };
  const freshQueryList = (params) => {
  };

  const refreshFilter = (params) => {
    if (params.app_id !== appIds) {
      setEvents([]);
      setProductList([]);
      getProductCodeList({app_id: params.app_id});
      setAppIds(params.app_id);
      return
    } 
    if (params.product_id && params.product_id !== productIds) {
      setEvents([]);
      getEventCodeList({app_id: params.app_id, product_id: params.product_id});
      setProduction( params.product_id);
      return
    }
    console.log('ssss', params)
    props.searchFn && props.searchFn(params);
  };
  const filterItems = [
    {
      type: 'Select',
      key: 'app_id',
      name: 'app_id',
      label: '渠道',
      defaultValue: -1,
      allowClear: true,
      options: [
        ...applications.map((item) => {
          return {
            value: item.app_id,
            name: item.app_name,
          };
        }),
      ]
    },
    {
      type: 'Select',
      key: 'product_id',
      name: 'product_id',
      label: '产品',
      defaultValue: -1,
      allowClear: true,
      options: [
        ...productList.map((item) => {
          return {
            value: item.product_id,
            name: item.product_name,
          };
        }),
      ],
    //   onChange: this.onEventChangeSelect,
    },
    {
        type: 'Select',
        key: 'event_id',
        name: 'event_id',
        label: '事件',
        defaultValue: -1,
        allowClear: true,
        options: [
          ...events.map((item) => {
            return {
              value: item.event_id,
              name: item.event_name,
            };
          }),
        ],
      //   onChange: this.onEventChangeSelect,
      },
    {
      type: 'rangepicker',
      key: 'start',
      name: ['start', 'end'],
      label: '统计时间',
      defaultValue: [
        moment()
          .subtract(7, 'day')
          .startOf('day')
          .format('YYYY-MM-DD HH:mm:ss'),
        moment().format('YYYY-MM-DD HH:mm:ss'),
      ],
      disabledDate: (current) => {
        return current && current > moment().endOf('day');
      },
      ranges: {
        本周: [moment().startOf('week'), moment()],
        近7天: [moment().subtract('days', 6), moment()],
        本月: [moment().startOf('month'), moment()],
        近30天: [moment().subtract('days', 29), moment()],
      },
      format: 'YYYY-MM-DD HH:mm:ss',
      placeholder: ['起始时间', '结束时间'],
      allowClear: false,
    },
  ];
  return (
    <FilterTool
      ref={filterNode}
      data={filterItems}
      colNum={4}
      query={freshQueryList}
      refreshFilter={refreshFilter}
      isOnChange={true}
      disabled={props.isDisable}
      justify='end'
    />
  )
}